// JavaScript Document

//var events = null;
var mousex = null;
var mousey = null;

function browserSupport(){
	try{	
		document.createElement("canvas").getContext("2d");
	}catch(e){
		alert( "Sorry, Your browser is not support." );
	}
}

function createContext(canvas)
{
	var context = document.getElementById(canvas).getContext("2d");
	return context;
}

function initFBall(){
	try{
		// Check your Browser Support
		browserSupport();	
		
		
	}catch(e){
		alert( "Initialize Fail!" );
	}
}

// Drawing
function fbBox(context, a, b, x, y){
	context.moveTo( a, b );
	context.lineTo( b, x );
	context.lineTo( x, y );
	context.lineTo( y, a );
	context.lineTo( a, b );
	context.stroke();
}

function fbLine(context, a, b, x, y)
{
	context.moveTo ( a, b );
	context.lineTo ( x, y );
	context.stroke();
}

function fbGrid(context, startx, starty, cols, rows, colWidth, rowHeight)
{
	// Rows
	for ( r = 0; r <= rows; r++ )
	{
		fbLine ( context, startx, r * rowHeight + starty, cols * rowHeight + startx, r * rowHeight + starty);
	}
	
	for ( c = 0; c <= cols; c++ )
	{
		fbLine ( context, startx + c * rowHeight, starty, c * rowHeight + startx, rows * rowHeight + starty);
	}
}

function initEvents(canvas, context, events){
	// Mouse Move
	document.getElementById(canvas).onmousemove = function(e){
		updateTest(e.layerX + ":" + e.layerY + ":" + events + ":" )		
		if ( events != "mousedown"){
			events = "mousemove";
		}
		
		context.clearRect(0, 0, 550, 350 );
		context.fillText( "hello", e.layerX, e.layerY);		
		
	}
	
	document.getElementById(canvas).onmousedown = function(e){
		events = "mousedown";
		window.mousex = e.layerX;
		window.mousey = e.layerY;
	}
	
	document.getElementById(canvas).onmouseup = function(e){
		events = "mouseup"
	}
	
	
}

// Testing 
function updateTest(str){
	document.getElementById("test").innerHTML = str;	
}
